<template>
  <div :class="['wft-dynamic-comp', animationsClass(comp.style.animate.classNames), { 'animate__infinite': comp.style.animate.isInfinite }]" :style="getCompStyle(comp)">
    <!-- 基础组件 -->
    <component v-if="comp.type == 'basic' || comp.type == 'form'" :curComp="comp" :data="comp.data" :is="`${comp.compKey}Temp`" />
    <!-- 高级 - 容器组件 -->
    <div v-else-if="comp.type == 'senior' && comp.compKey == 'seniorContainer'" class="wft-dynamic-comp-senior-container" :ref="getAttrs(comp.attrs).ref">
      <DynamicComp v-for="item in comp.children" :key="item.id" :comp="item" />
    </div>
    <!-- 高级 - 循环组件 -->
    <SeniorLoop v-else-if="comp.type == 'senior' && comp.compKey == 'seniorLoop' && comp.children.length" :curComp="comp" />
    <!-- 高级 - 表单组件 -->
    <SeniorForm v-else-if="comp.type == 'senior' && comp.compKey == 'seniorForm' && comp.children.length" :curComp="comp" />
  </div>
</template>
<script>
import { animationsClass } from '../utils'
import DynamicComp from './dynamicComp'
import SeniorLoop from './customComps/SeniorLoop'
import SeniorForm from './customComps/SeniorForm'
export default {
  name: 'DynamicComp',
  data() {
    return { animationsClass }
  },
  components: { DynamicComp, SeniorLoop, SeniorForm },
  props: {
    comp: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 组件样式
    getCompStyle(comp) {
      const s = {}
      const { backgroundColor, backgroundImage, border, zIndex } = JSON.parse(JSON.stringify(comp.style))
      s.backgroundColor = backgroundColor || 'transparent'
      s.backgroundImage = `url(${backgroundImage})`
      s.zIndex = zIndex ?? 1
      if(border.show) {
        s.border = `${border.borderWidth}px ${border.borderType} ${border.borderColor}`
        s.borderRadius = `${border.borderRadius}px`
      }
      return {
        top: comp.resizeGrid.top,
        left: comp.resizeGrid.left,
        width: comp.resizeGrid.width,
        height: comp.resizeGrid.height,
        ...s
      }
    },
    getAttrs(attrList) {
      const attrs = {}
      if(attrList && attrList.length) {
        for(let attr of attrList) {
          attrs[attr.name] = attr.value
        }
      }
      return attrs
    }
  }
}
</script>
<style scoped>
.wft-dynamic-comp {
  position: absolute;
  background-size: 100% 100%;
}

.wft-dynamic-comp-senior-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
